import React from "react";
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-javascript'; // js模式的包
import 'ace-builds/src-noconflict/theme-monokai';// eclipse的主题样式
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/webpack-resolver'

import "./index.scss";

export default function Editor(props) {

    return (
        <div className='editor'>
            <AceEditor
                mode='javascript'
                theme="monokai"
                name="app_code_editor"
                fontSize={ 16 }
                showPrintMargin = { false }
                showGutter
                onChange={ value => {} }
                value={ '' }
                wrapEnabled
                highlightActiveLine  //突出活动线
                enableSnippets  //启用代码段
                style={{ width: '100%', height: '100%' }}
                setOptions={{
                    enableBasicAutocompletion: true,   //启用基本自动完成功能
                    enableLiveAutocompletion: true,   //启用实时自动完成功能 （比如：智能代码提示）
                    enableSnippets: true,  //启用代码段
                    showLineNumbers: true,
                    tabSize: 2,
                }}
            />
        </div>
    )
}